/*
 * @Descripttion: 
 * @Author: voanit
 * @Date: 2022-06-08 16:36:34
 * @LastEditors: voanit
 * @LastEditTime: 2022-06-11 17:45:14
 */
import React from 'react'
import dayjs from 'dayjs'
import classnames from 'classnames'

import Icon from '@/components/Icon/Icon'
import styles from './index.module.scss'
import { CommentDetail } from '@/types/data'
type Props = {
  type?: 'normal' | 'reply' | 'origin'
  comment: CommentDetail  //每一项的评论
  onReply: (comment: CommentDetail) => void
}
const CommentItem = ({ type = 'normal', comment, onReply }: Props) => {
  // 回复按钮
  const replyJSX =
    type === 'normal' ? (
      <span className="replay" onClick={() => onReply(comment)}>
        {comment.reply_count} 回复
        <Icon type="iconbtn_right" />
      </span>
    ) : null
  return <div className={styles.root}>
    <div className="avatar">
      <img src={comment.aut_photo} alt="" />
    </div>
    <div className="comment-info">
      <div className="comment-info-header">
        <span className="name">{comment.aut_name}</span>
        {/* 文章评论、评论的回复 */}
        {(type === 'normal' || type === 'reply') && (
          <span className="thumbs-up">
            {comment.like_count}
            <Icon
              type={comment.is_liking ? 'iconbtn_like_sel' : 'iconbtn_like2'}
            />
          </span>
        )}
        {/* 要回复的评论 */}
        {type === 'origin' && (
          <span
            className={classnames(
              'follow',
              comment.is_followed ? 'followed' : ''
            )}
          >
            {comment.is_followed ? '已关注' : '关注'}
          </span>
        )}
      </div>
      <div className="comment-content">{comment.content}</div>
      <div className="comment-footer">
        {replyJSX}
        {/* 非评论的回复 */}
        {type !== 'reply' && (
          <span className="comment-time">
            {dayjs(comment.pubdate).fromNow()}
          </span>
        )}
        {/* 文章的评论 */}
        {type === 'origin' && (
          <span className="thumbs-up">
            {comment.like_count}
            <Icon
              type={comment.is_liking ? 'iconbtn_like_sel' : 'iconbtn_like2'}
            />
          </span>
        )}
      </div>
    </div>
  </div>
};
export default CommentItem